<template>
  <div class="filter_bar bbi">
    <div class="filter">
      <span v-for="(item,index) in filterCate"
            class="on-active"
            :class="{active: popupVisible && currentCate === index}"
            @click="toggleCateEvent(index)">{{filterNames[index]}}</span>
    </div>
    <transition name="fade-in-down" mode="in-out">
      <div class="filter-popup" v-if="popupVisible">
        <div class="filter-list bbi"
             v-for="(item,cateIndex) in filterCate"
             v-if="currentCate === cateIndex">
          <div class="filter-list-inner bti">
            <div class="filter-item bbi on-active"
                 v-for="subItem in item.values"
                 @click="filterEvent(subItem[nameKey], cateIndex, subItem[valueKey])">{{subItem[nameKey]}}
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style lang="less" rel="stylesheet/less">
  @import '../assets/less/_mixins-wln.less';

  .filter_bar {
    background-color: #fff;
    padding-bottom: 1px;
    .filter {
      position: relative;
      z-index:99;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-content: center;
      span {
        width: 50%;
        text-align: center;
        padding: 15px 0;
        margin-bottom: -1px;
        &:after {
          content: '';
          vertical-align: 2px;
          margin-left: 4px;
          display: inline-block;
          border-color: #222 transparent transparent transparent;
          border-width: 5px 4px 0 4px;
          border-style: solid solid solid solid;
          transition: transform 0.4s;
        }
        &.active {
          color: @primary;
          &:after {
            border-color: @primary transparent transparent transparent;
            transform: rotate(180deg);
          }
        }
      }
    }
    .filter-popup {
      height: 0;
      position: relative;
      background-color: #fff;
      z-index: 98;
    }
    .filter-list {
      padding-top: 1px;
      padding-bottom: 1px;
      background-color: #fff;
      position: absolute;
      right: 0;
      left: 0;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
      .filter-list-inner {
        max-height: 50vh;
        overflow: auto;
      }
      .filter-item {
        padding: 14px 16px;
        &:last-child {
          background-image: none;
        }
      }
    }
  }

</style>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'

  export default {
    name: 'CFilterBar',
    props: {
      filterCate: {
        type: Array
      },
      filterKeys: {
        type: Array
      },
      nameKey: {
        type: String,
        default: 'text'
      },
      valueKey: {
        type: String,
        default: 'value'
      }
    },
    data () {
      return {
        popupVisible: false,
        currentCate: 0
      }
    },
    computed: {
      ...mapState('user', ['isVip']),
      filterNames () {
        return this.filterCate.map(item => item.cateName)
      }
    },
    methods: {
      toggleCateEvent (cateIndex) {
        this.popupVisible = (this.currentCate !== cateIndex) ? true : !this.popupVisible
        this.currentCate = cateIndex
      },
      indexToObj (cate, id) {
        let keys = this.filterKeys[cate]
        return {
          [`${keys}`]: id
        }
      },
      filterEvent (name, cate, cid) {
        this.currentCate = cate
        this.filterNames[cate] = name
        this.$emit('onChange', this.indexToObj(cate, cid))
        this.popupVisible = !this.popupVisible
      }
    }
  }
</script>
